Update code block styling and syntax theme colors#5109
Conversation
|
@huntie is attempting to deploy a commit to the React Foundation Team on Vercel. A member of the Team first needs to authorize it. |
✅ Deploy Preview for react-native ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
huntie
force-pushed
the
update-code-block-styling
branch
from
dc7a639 to
4f40608
Compare
|
This looks good, great changes overall! 👍 Just one thing which we might want to address - the light mode code blocks lacks a bit of separation now from the background after the changes. To fix that we can add slight box shadow (like on react.dev) or just use border. 
|
|
@Simek I reckon this is enough contrast. Not keen on the visual clutter of shadows. I guess we could try an outline too, matching the admonitions (previewed below). 
The main thing that matters I'd say is the text contrast (vs contrast with surrounding paragraphs). Edit: This also matches the homepage graphic more closely, actioning. 
|
Modernise apperance of code blocks by updating font, tweaking sizing, and introducing light/dark variants (aligned with react.dev). **Changes** - Remove the custom Source Code Pro web font in favor of the default Docusaurus system monospace font stack. - Add separate light and dark Prism syntax themes aligned to the react.dev Sandpack color palette, replacing the previous single dark-only custom theme. - Reduce code block font size and increase line height. - Update code block title backgrounds to match their code block, with a keyline separator. Syntax colors source: https://github.com/reactjs/react.dev/blob/6ec61348646040795fdaa9de14a9bec603260f87/src/styles/sandpack.css#L38-L78
huntie
force-pushed
the
update-code-block-styling
branch
from
4f40608 to
db7561a
Compare
Simek
left a comment
Simek
left a comment
There was a problem hiding this comment.
Agree, and border adds enough of separation. Thanks for the quick update! 🚀
2 participants
Summary
Modernise apperance of code blocks by updating font, tweaking sizing, and introducing light/dark variants (aligned with react.dev).
Changes
Syntax colors source: https://github.com/reactjs/react.dev/blob/6ec61348646040795fdaa9de14a9bec603260f87/src/styles/sandpack.css#L38-L78
Notes
The main motivation here is horizontal space efficiency, which I felt was poor with Source Code Pro.
Test plan
Before
After